<template>
  <div class="box">
      <div class="box-hearder xt-flex-center-item">
        婚纱摄影 - 一路有你
      </div>
      <div class="box-nav xt-flex-center-item">
        <div class="box-nav-content xt-flex xt-justify-between">
          <div class="box-nav-content-text" @click="goLink(item.link)" :class="[{'box-nav-content-active':navNumber === index}]" v-for="(item, index) in nav" :key="index">{{ item.name }}</div>
        </div>
      </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
  components: {
  },
})
export default class Home extends Vue{
  @Prop({}) navNumber!:any // 接收父组件传过来的数据

  nav:any = [
    { name:'首页', link:'/' },
    { name:'摄影预定', link:'/appointment' },
    { name:'影集信息', link:'/photograph'},
    { name:'我的', link:'/my'},
  ];

  // 路由页面跳转
  goLink(link:string){
    if(!window.localStorage.cyxUser){
      (this as any).$router.push({
        path:'/login'
      });
      return;
    }
    (this as any).$router.push({
      path:link
    })
  }
}
</script> 

<style scoped lang="less">
  .box{
    &-hearder{
      background-image: url("../assets/img/heade_bg.png");
      background-size: 100% 100%;
      height: 70px;
      font-size: 30px;
      color: red;
    }
    &-nav{
      background-color: #b4b4b4;
      height: 50px;

      &-content{
        width: 500px;
        &-text{
          cursor: pointer;
          font-size: 18px;
        }
        &-active{
          color: red;
        }
      }
    }
  }
</style>
